/**
*修改数据字典
*/
<template>
    <vp-dialog ref="editDialogRef" :span="1">
        <template #title>
            <vp-label v-if="type == 'add'" zh="新增" en="Add" align="left"/>
            <vp-label v-else zh="修改" en="Edit" align="left"/>
        </template>
        <el-form label-suffix=":" v-loading="loading"  :model="formData" :rules="formRules" ref="formRef" label-width="120px">
            <el-row>
                <vp-col :span="1">
                    <el-form-item :label="$t('item.dict')" prop="sz">
                        <template #label><vp-label zh="数据字典" en="Data Dictionary" align="left"/></template>
                        <el-input v-model="formData.sz"  v-trim maxlength="100"></el-input>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item :label="$t('item.order')" prop="xc">
                        <template #label><vp-label zh="顺序" en="Order" align="left"/></template>
                        <el-input v-model.number="formData.xc"  v-trim maxlength="5"></el-input>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row v-if="formData.lxid == '407'||formData.lxid == '409'">
                <vp-col :span="1">
                    <el-form-item :label="$t('item.remark')">
                        <template #label><vp-label zh="备注" en="Remark" align="left"/></template>    
                        <el-button
                            circle
                            @click="handleAddExtend"
                        >
                        <SvgIcon name="elementPlus"></SvgIcon>
                    </el-button>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1"  v-for="(item, index) in formData.children" :key="index">
                    <el-form-item
                    :prop="`children[${index}].mc`"
                    label-width="160px"
                    :rules="formRules.item.mc"
                    >
                    <template #label>
                        <el-button
                        circle
                        @click="handleDeleteExtend(index)"
                        ><SvgIcon name="elementMinus"></SvgIcon
                        ></el-button>
                    </template>
                    <el-input
                        v-model="formData.children[index].mc"
                        maxlength="1300"
                        type="textarea"
                    >
                    </el-input>
                    </el-form-item>
                </vp-col>
            </el-row>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="editDictionary">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils';

const emits = defineEmits(['formSubmited']);
    const formData = ref({
        id: "",
        lxid: "",
        sz: "",
        xc: null,
        dprtcode:"",
        children:[] as any[],
    });
    const formRules = {
        sz: [
            validateUtils.notNull,
        ],
        xc: [
            validateUtils.integer
        ],
        item:{
            mc :  [
                validateUtils.notNull,
            ],
        }
    }

    const type = ref('add');
    const loading = ref(false);
    const saveLoading = ref(false);

    const formRef = ref();
    const editDialogRef = ref();

    const init = ()=>{
        formData.value = {
            id: "",
            lxid: "",
            sz: "",
            xc: null,
            dprtcode:"",
            children:[] as any[],
        }
    }

    const handleOpen = (_type: any, _lxid: any, row: any) => {
        init();
        type.value = _type;
        formData.value.lxid = _lxid;
        if(type.value === 'edit'){
            formData.value = {
                id: row.id,
                lxid: row.lxid,
                sz: row.sz,
                xc: row.xc,
                dprtcode:row.dprtcode,
                children:[],
            }
        }
        if(formData.value.id){
            loading.value = true;
            request.get(`/system/dict/extend/${formData.value.id}`).then((res)=>{
                formData.value.children = res?.data || [];
                loading.value = false;
            })
        }
        editDialogRef.value.handleOpen();
    };
    const handleSave = () => {
        saveLoading.value = true;
        formRef.value.validate((valid: boolean)=>{
            if(valid){
                request.post("/system/dict/"+type.value, {
                    ...formData.value,
                    mc: formData.value.sz,
                }).then(()=>{
                    emits("formSubmited");
                    editDialogRef.value.handleClose();
                }).catch(()=>{
                    saveLoading.value = false;
                }).finally(()=>{
                    saveLoading.value = false;
                })
            }else{
                saveLoading.value = false;
            }
        })
                
    };
    
    const handleAddExtend = ()=>{
        formData.value.children.push({
            id : "",
            mainid: formData.value.id,
            mc:"",
            xc:null,
        })
    }

    const handleDeleteExtend = (i:number)=>{
        formData.value.children.splice(i, 1);
    }

    defineExpose({
        handleOpen,
    })

</script>
